<template>
  <div class="box">
    <!-- 顶部我的 -->
    <div class="box1">
      <router-link to="/personal">
        <i class="jiantou iconfont icon-jiantou2"></i>
      </router-link>
      <h2 class="wode">聊天</h2>
    </div>
    <div class="box2">
      <div class="wenzhen">
        <img class="touxiang"
             :src="
            myfriendInfo.faceImage
              ? myfriendInfo.faceImage.split('/')[0] === 'M00'
                ? 'http://123.56.23.31:88/st/' + myfriendInfo.faceImage
                : myfriendInfo.faceImage
              : ''
          "
             alt="" />
        <div class="yisheng">
          <h5 class="xingming"
              style="color: skyblue">
            姓名：{{ myfriendInfo.username }}
          </h5>
          <div class="jiangshi"
               style="color: skyblue">
            昵称：{{ myfriendInfo.nickname }}
          </div>
          <div class="ganran">此人很懒</div>
          <div class="zhuzhi">此人很懒</div>
          <div class="hayi">此人很懒</div>
        </div>
      </div>
    </div>
    <!-- 要渲染的盒子 -->
    <div id="messageContainer"></div>

    <!-- <div class="box5" v-for="item in friendMessageList" :key="item.id">
      <img class="touxiang1" :src="item.userphoto" alt="" />
      <div class="wenti">
        <div class="wenti1">{{ item.msg }}</div>
      </div>
    </div> -->
    <!-- <div class="box3" v-for="(item, index) in myMessageList" :key="index">
      <img class="touxiang1" :src="item.userphoto" alt="" />
      <div class="wenti">
        <div class="wenti1">{{ item.msg }}</div>
      </div>
    </div> -->
    <!-- <div class="box3" :key="index" v-for="(item,index) in messageList">
      <img class="touxiang1" :src="item.userphoto" alt="" />
      <div class="wenti">
        <div class="wenti1">{{item.msg}}</div>
      </div>
    </div> -->
    <div class="boxbox"></div>
    <div class="box4">
      <div class="dibu">
        <input style="padding: 0 10px"
               placeholder="请输入您的消息"
               class="wenben"
               type="text"
               v-model="input" />
        <button class="fasong"
                @click="websocketSend">发送</button>
      </div>
    </div>
    <audio id="audio"
           src="../../../public/tip.mp3"
           preload="auto"></audio>
  </div>
</template>

<script>
var timer
var audio
var mesageContainer
import { getUserById } from "../../api/getData.js";
import app from "../../app.js"
export default {
  data () {
    return {
      myuserInfo: {},
      myfriendInfo: {},
      input: "",
      websock: null,
      // myMessageList: [],
      // friendMessageList: []
    }
  },
  created () {
    this.initWebpack()
    // 获取自己的信息
    getUserById(this.$route.query.myuserId).then(res => {
      this.myuserInfo = res.data.data
    })
    // 获取朋友的信息
    getUserById(this.$route.query.friendId).then(res => {
      this.myfriendInfo = res.data.data
    })
  },
  mounted () {
    audio = document.getElementById('audio')
    mesageContainer = document.getElementById('messageContainer')
  },
  methods: {
    initWebpack () {//初始化websocket
      const wsuri = "ws://123.56.23.31:8888/ws";
      this.websock = new WebSocket(wsuri);//这里面的this都指向vue
      this.websock.onopen = this.websocketopen;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.close = this.websocketclose;
      this.websock.onerror = this.websocketerror;
    },
    websocketopen () {//打开
      console.log("WebSocket连接成功")
      // 本人进入
      var chatMsg = new app.ChatMsg(this.$route.query.myuserId, null, null, null);
      //构建DataContent
      var dataContent = new app.DataContent(1, chatMsg, null);
      this.chat(JSON.stringify(dataContent));
      // 打开心跳
      timer = setInterval(this.keepalive, 10000);
    },
    websocketonmessage (e) { //数据接收
      console.log(e.data, "连接正常")
      audio.play()
      var dataConetent = JSON.parse(e.data)
      let mymessage = {}
      mymessage.msg = dataConetent.chatMsg.msg
      mymessage.userphoto = this.myfriendInfo.faceImage.split('/')[0] === 'M00' ? 'http://123.56.23.31:88/st/' + this.myfriendInfo.faceImage : this.myfriendInfo.faceImage
      // this.friendMessageList.push(mymessage)
      mesageContainer.innerHTML
        +=
        `<div class="box5">
          <img class="touxiang1" src="${mymessage.userphoto}" alt="" />
          <div class="wenti">
            <div class="wenti1">${mymessage.msg}</div>
          </div>
        </div>`
    },
    websocketclose () { //关闭
      console.log("WebSocket关闭");
    },
    websocketerror () { //失败
      console.log("WebSocket连接失败");
      this.initWebpack()
    },
    chat (msg) {
      this.websock.send(msg);
    },
    websocketSend () {
      if (this.input.trim() !== '') {
        let mymessage = {}
        mymessage.msg = this.input
        mymessage.userphoto = this.myuserInfo.faceImage.split('/')[0] === 'M00' ? 'http://123.56.23.31:88/st/' + this.myuserInfo.faceImage : this.myuserInfo.faceImage
        // this.myMessageList.push(mymessage)
        var chatMsg = new app.ChatMsg(this.$route.query.myuserId, this.$route.query.friendId, this.input, null);
        //构建DataContent
        var dataContent = new app.DataContent(2, chatMsg, null);
        this.chat(JSON.stringify(dataContent));
        // 模板字符串可能不渲染
        mesageContainer.innerHTML
          +=
          `<div class="box3">
          <img class="touxiang1" src="${mymessage.userphoto}" alt="" />
          <div class="wenti">
            <div class="wenti1">${mymessage.msg}</div>
          </div>
        </div>`
        this.input = ""
      } else {
        this.$message.fail('输入为空！')
        this.input = ""
      }
    },
    // 心跳对象
    keepalive () {
      // console.log("心跳");
      //构建对象
      var dataConetent = new app.DataContent(4, null, null);
      //发送心跳
      this.chat(JSON.stringify(dataConetent));
    }
  },
  destroyed () {
    this.websocketclose()
    clearInterval(timer)
    this.$message("您退出了聊天系统");
  }
};
</script>

<style lang="scss" scoped>
html,
body,
/deep/.box {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  background: rgb(247, 247, 247);
}
/deep/.boxbox {
  height: 53px;
  width: 100%;
}
.box1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
  position: relative;
  //  display: flex;
  // justify-content: space-around;
}
.jiantou {
  position: absolute;
  font-size: 22px;
  color: black;
  margin-left: 4px;
}
.wode {
  margin-left: 45%;
  font-weight: bold;
  position: absolute;
}
.shezhi {
  margin-left: 80%;
  font-size: 18px;
  color: black;
  position: absolute;
}
.shezhi1 {
  float: right;
  font-size: 22px;
  margin-top: 1px;
  display: block;
  margin-right: 15px;

  color: black;
}
.box2 {
  width: 90%;
  height: 100px;
  background: rgb(255, 255, 255);
  margin-top: 15px;
  border-radius: 10px;
  margin-left: 5%;
  box-shadow: 5px 5px 5px #888888;
}
.wenzhen {
  width: 95%;
  height: 100px;
  // background: chartreuse;
  // margin: 0 auto;
  // margin-left: 5px;
  top: 10px;
  position: relative;
}
.touxiang {
  width: 20%;
  height: 60px;
  // border-radius: 25px;
  margin-top: 7px;
  margin-left: 10px;
  position: absolute;
}
.yisheng {
  width: 70%;
  height: 80px;
  // background: rgb(92, 95, 90);
  margin-left: 100px;
  // margin-top: 10px;
  position: relative;
  line-height: 25px;
  font-size: 14px;
}
.xingming {
  position: absolute;
}
.zhuzhi {
  margin-left: 35%;
}
.hayi {
  position: absolute;
}
.ganran {
  // margin-left: 50%;
  position: absolute;
}
.jiangshi {
  margin-left: 35%;
}
/deep/.box5 {
  width: 100%;
  height: 70px;
  // background: chartreuse;
  position: relative;
  top: 15px;
  margin-bottom: 20px;
}
/deep/.box5 .touxiang1 {
  width: 13%;
  height: 45px;
  border-radius: 25px;
  margin-top: 10px;
  margin-right: 14px;
  position: absolute;
  right: 0;
}
/deep/.box5 .wenti {
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  margin-right: 20%;
  margin-top: 10px;
  position: absolute;
  right: 0;
  box-shadow: 5px 5px 5px #888888;
  line-height: 40px;
  border-radius: 20px;
}
/deep/.box3 {
  width: 100%;
  height: 70px;
  // background: chartreuse;
  position: relative;
  top: 15px;
  margin-bottom: 20px;
}
/deep/.touxiang1 {
  width: 13%;
  height: 45px;
  border-radius: 25px;
  margin-top: 10px;
  margin-left: 14px;
  position: absolute;
}
/deep/.wenti {
  width: 65%;
  background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
  margin-left: 20%;
  margin-top: 10px;
  position: absolute;
  box-shadow: 5px 5px 5px #888888;
  line-height: 40px;
  border-radius: 20px;
}
/deep/.wenti1 {
  padding: 0 10px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}
.box4 {
  width: 100%;
  height: 53px;
  // background: blueviolet;
  position: fixed;
  bottom: 0;
  z-index: 999;
  // background-color: #fff;
  width: 100%;
  // border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.dibu {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  // -webkit-justify-content: center;
  // justify-content: center;
}
.wenben {
  width: 75%;
  height: 30px;
  border-radius: 20px;
  margin-left: 2%;
  margin-top: 7px;
  // border: 1px solid black;
  background: rgb(238, 238, 238);
}
.fasong {
  width: 20%;
  height: 30px;
  margin-top: 7px;
  margin-left: 2%;
  border-radius: 20px;
  display: block;
  background: rgb(255, 255, 255);
  font-size: 14px;
}
.gongneng {
  width: 100%;
  height: 40px;
  // background: aqua;
  // line-height: 35px;
  position: relative;
  display: flex;
  justify-content: space-around;
}
.gongnneg1 {
  width: 30%;
  height: 40px;
  // background: black;
  margin-left: 2%;
  line-height: 30px;
}
.xiaolian {
  display: block;
  font-size: 20px;
  // margin-left: 10px;
  margin-top: 2px;
  position: absolute;
}
.xiaolian1 {
  font-size: 13px;
  margin-left: 25%;
}
</style>